import React from 'react'
import { connect } from 'react-redux'
import classnames from 'classnames'
import { NavLink } from 'react-router-dom'
import ConfigBase from './ConfigBase'

const mapStateToProps = (state) => {
  return {
    chooseCreateGameData: state.group.chooseCreateGame,
    gameData: state.app.gameData
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
  }
}

const NoGame = (props) => {
  return <div className="vh-center column full">
    <img className="no-game" src="img/groupNew/no-game.png" alt=""/>
  </div>
}

class Add extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
    }
  }
  
  public componentDidMount() {

  }

  public render() {
    const {chooseCreateGameData} = this.props
    // const {currentGame} = this.state
    return <div className="view-page group-view">
      <NavLink to="/ChooseGame">
        <div className="inner-header v-center add-top pure-g">
          {
            chooseCreateGameData ? <div className="add-rule-tips pure-u-3-4">
              <img className="full-height one-line mlr-5" src={chooseCreateGameData.icon} alt=""/>
              <span>{chooseCreateGameData.name}</span>
            </div> :
             <img className="add-rule-tips pure-u-2-4" src="img/groupNew/choose-game-text.png" alt=""/>
          }
          <img className="add-rule-arrow" src="img/groupNew/ARROW.png" alt=""/>
        </div>
      </NavLink>
      <div className="inner-body">
        {
          chooseCreateGameData ? <ConfigBase></ConfigBase> : <NoGame></NoGame>
        }
      </div>
      <div className="inner-bottom">
        <div className="text vh-center"><span>添加玩法</span></div>
        <NavLink to="/Inner"><img className="back" src="img/app/back.png" alt="" /></NavLink>
      </div>
    </div>
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(Add)